import React from 'react';
import { Router, Route, Switch, Link } from 'react-router-dom'; 
import createBrowserHistory from 'history/createBrowserHistory';
import classNames from 'classnames/bind';
import Degree from './routers/Degree';
import Comment from './routers/Comment';
import Todo from './routers/Todo';
import { Icon } from 'antd';
import {Main} from './routers/Cnode';
import { RouterRedux } from './routers/RouterRedux';
import {TopicDetail}  from './routers/Cnode/TopicDetail';

export default class MyRouter extends React.Component {
    render() {
        const history = createBrowserHistory();
        return (
            <Router history={history}>
                <div className = {classNames("left", "menus")}>
                    <ul>
                        <li className = {classNames("menu_item")}><Link to="/comment">评论 <Icon type="right" style={{"fontSize": "12px"}}/></Link></li>
                        <li className = {classNames("menu_item")}><Link to="/degree">温度 <Icon type="right" style={{"fontSize": "12px"}}/></Link></li>
                        <li className = {classNames("menu_item")}><Link to="/todo">待办 <Icon type="right" style={{"fontSize": "12px"}}/></Link></li>
                        <li className = {classNames("menu_item")}><Link to="/cnode">Cnode <Icon type="right" style={{"fontSize": "12px"}}/></Link></li>
                        <li className = {classNames("menu_item")}><Link to="/route">路由匹配 <Icon type="right" style={{"fontSize": "12px"}}/></Link></li>
                    </ul>
                </div>
                <div className = {classNames("right", "content")}>
                    <Switch>
                        <Route 
                            path = "/comment"
                            exact
                            component = { Comment }
                        />
                        <Route 
                            path = "/degree"
                            exact
                            component = { Degree }
                        />
                        <Route 
                            path = "/todo"
                            exact
                            component = { Todo }
                        />
                        <Route 
                            path = "/cnode"
                            exact
                            component = { Main }
                        />
                        <Route 
                            path = "/route"
                            component = { RouterRedux }
                        />
                        <Route 
                            path = "/topic-detail/:id"
                            component = { TopicDetail }
                        />
                    </Switch>
                </div>
            </Router>
        )
    }
}